<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>考勤系统统计报表</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36D399',
            warning: '#FF9F43',
            danger: '#FF5252',
            info: '#00D2FF',
            dark: '#1E293B',
            'dark-light': '#334155',
            'light-gray': '#F8FAFC'
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-shadow {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
      }
      .nav-shadow {
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.03);
      }
      .sidebar-shadow {
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.03);
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
    }
  </style>
</head>
<body class="font-inter bg-gray-50 text-dark overflow-x-hidden">
  <div class="flex h-screen">
    <!-- 侧边栏 -->
    <aside id="sidebar" class="w-64 bg-white sidebar-shadow transition-all duration-300 ease-in-out transform z-30">
      <div class="p-4 border-b border-gray-100">
        <div class="flex items-center space-x-3">
          <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
            <i class="fa fa-calendar-check-o text-white text-xl"></i>
          </div>
          <h1 class="text-xl font-bold text-dark">考勤系统</h1>
        </div>
      </div>
      
      <nav class="p-4">
        <div class="mb-6">
          <p class="text-xs uppercase text-gray-400 font-semibold mb-3">主导航</p>
          <ul class="space-y-1">
            <li>
              <a href="#" class="flex items-center space-x-3 text-gray-600 hover:text-primary hover:bg-blue-50 px-3 py-2 rounded-lg transition-all">
                <i class="fa fa-dashboard w-5 text-center"></i>
                <span>仪表盘</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center space-x-3 bg-primary/10 text-primary px-3 py-2 rounded-lg font-medium">
                <i class="fa fa-bar-chart w-5 text-center"></i>
                <span>统计报表</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center space-x-3 text-gray-600 hover:text-primary hover:bg-blue-50 px-3 py-2 rounded-lg transition-all">
                <i class="fa fa-users w-5 text-center"></i>
                <span>员工管理</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center space-x-3 text-gray-600 hover:text-primary hover:bg-blue-50 px-3 py-2 rounded-lg transition-all">
                <i class="fa fa-calendar w-5 text-center"></i>
                <span>考勤记录</span>
              </a>
            </li>
          </ul>
        </div>
        
        <div class="mb-6">
          <p class="text-xs uppercase text-gray-400 font-semibold mb-3">系统设置</p>
          <ul class="space-y-1">
            <li>
              <a href="#" class="flex items-center space-x-3 text-gray-600 hover:text-primary hover:bg-blue-50 px-3 py-2 rounded-lg transition-all">
                <i class="fa fa-cog w-5 text-center"></i>
                <span>系统设置</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center space-x-3 text-gray-600 hover:text-primary hover:bg-blue-50 px-3 py-2 rounded-lg transition-all">
                <i class="fa fa-user-circle-o w-5 text-center"></i>
                <span>个人信息</span>
              </a>
            </li>
          </ul>
        </div>
      </nav>
      
      <div class="absolute bottom-0 w-full p-4 border-t border-gray-100">
        <div class="flex items-center space-x-3">
          <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
          <div>
            <p class="text-sm font-medium">张经理</p>
            <p class="text-xs text-gray-500">人力资源部</p>
          </div>
          <button class="ml-auto text-gray-400 hover:text-gray-600">
            <i class="fa fa-sign-out"></i>
          </button>
        </div>
      </div>
    </aside>

    <!-- 主内容区 -->
    <div class="flex-1 flex flex-col overflow-hidden">
      <!-- 顶部导航 -->
      <header class="bg-white nav-shadow z-20">
        <div class="flex items-center justify-between px-6 py-3">
          <div class="flex items-center">
            <button id="sidebarToggle" class="mr-4 text-gray-500 hover:text-primary">
              <i class="fa fa-bars text-xl"></i>
            </button>
            <div class="relative">
              <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                <i class="fa fa-search text-gray-400"></i>
              </span>
              <input type="text" placeholder="搜索..." class="bg-gray-100 rounded-lg pl-10 pr-4 py-2 w-64 focus:outline-none focus:ring-2 focus:ring-primary/30">
            </div>
          </div>
          
          <div class="flex items-center space-x-5">
            <button class="relative text-gray-500 hover:text-primary">
              <i class="fa fa-bell text-xl"></i>
              <span class="absolute top-0 right-0 w-2 h-2 bg-danger rounded-full"></span>
            </button>
            <button class="text-gray-500 hover:text-primary">
              <i class="fa fa-cog text-xl"></i>
            </button>
            <div class="border-l border-gray-200 h-8 mx-2"></div>
            <div class="flex items-center space-x-3">
              <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
              <span class="text-sm font-medium">张经理</span>
            </div>
          </div>
        </div>
      </header>

      <!-- 页面内容 -->
      <main class="flex-1 overflow-y-auto bg-light-gray p-6 scrollbar-hide">
        <div class="mb-6">
          <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark">考勤统计报表</h2>
          <p class="text-gray-500">查看和分析团队考勤数据</p>
        </div>
        
        <!-- 筛选区域 -->
        <div class="bg-white rounded-xl p-4 mb-6 card-shadow">
          <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">部门</label>
              <select class="w-full bg-gray-50 border border-gray-200 rounded-lg p-2.5 focus:outline-none focus:ring-2 focus:ring-primary/30">
                <option>全部部门</option>
                <option>人力资源部</option>
                <option>技术部</option>
                <option>市场部</option>
                <option>财务部</option>
              </select>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">时间范围</label>
              <select class="w-full bg-gray-50 border border-gray-200 rounded-lg p-2.5 focus:outline-none focus:ring-2 focus:ring-primary/30">
                <option>本月</option>
                <option>上月</option>
                <option>本季度</option>
                <option>上季度</option>
                <option>今年</option>
                <option>去年</option>
                <option>自定义</option>
              </select>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">员工</label>
              <select class="w-full bg-gray-50 border border-gray-200 rounded-lg p-2.5 focus:outline-none focus:ring-2 focus:ring-primary/30">
                <option>全部员工</option>
                <option>张三</option>
                <option>李四</option>
                <option>王五</option>
              </select>
            </div>
            <div class="flex items-end">
              <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2.5 rounded-lg transition-all flex-1 flex items-center justify-center space-x-2">
                <i class="fa fa-filter"></i>
                <span>筛选数据</span>
              </button>
            </div>
          </div>
        </div>
        
        <!-- 数据概览卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
          <div class="bg-white rounded-xl p-5 card-shadow hover:shadow-md transition-all">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-gray-500 font-medium">出勤率</h3>
              <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center text-primary">
                <i class="fa fa-check-circle"></i>
              </div>
            </div>
            <div class="flex items-end">
              <p class="text-3xl font-bold text-dark">92.5%</p>
              <p class="text-green-500 text-sm ml-2 flex items-center">
                <i class="fa fa-arrow-up mr-1"></i> 2.3%
              </p>
            </div>
            <p class="text-xs text-gray-500 mt-1">较上月提升 2.3%</p>
          </div>
          
          <div class="bg-white rounded-xl p-5 card-shadow hover:shadow-md transition-all">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-gray-500 font-medium">迟到次数</h3>
              <div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center text-warning">
                <i class="fa fa-clock-o"></i>
              </div>
            </div>
            <div class="flex items-end">
              <p class="text-3xl font-bold text-dark">48</p>
              <p class="text-red-500 text-sm ml-2 flex items-center">
                <i class="fa fa-arrow-up mr-1"></i> 12
              </p>
            </div>
            <p class="text-xs text-gray-500 mt-1">较上月增加 12 次</p>
          </div>
          
          <div class="bg-white rounded-xl p-5 card-shadow hover:shadow-md transition-all">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-gray-500 font-medium">缺勤天数</h3>
              <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center text-danger">
                <i class="fa fa-times-circle"></i>
              </div>
            </div>
            <div class="flex items-end">
              <p class="text-3xl font-bold text-dark">16</p>
              <p class="text-green-500 text-sm ml-2 flex items-center">
                <i class="fa fa-arrow-down mr-1"></i> 5
              </p>
            </div>
            <p class="text-xs text-gray-500 mt-1">较上月减少 5 天</p>
          </div>
          
          <div class="bg-white rounded-xl p-5 card-shadow hover:shadow-md transition-all">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-gray-500 font-medium">请假申请</h3>
              <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center text-purple-500">
                <i class="fa fa-file-text-o"></i>
              </div>
            </div>
            <div class="flex items-end">
              <p class="text-3xl font-bold text-dark">23</p>
              <p class="text-green-500 text-sm ml-2 flex items-center">
                <i class="fa fa-arrow-down mr-1"></i> 3
              </p>
            </div>
            <p class="text-xs text-gray-500 mt-1">较上月减少 3 次</p>
          </div>
        </div>
        
        <!-- 图表区域 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
          <div class="bg-white rounded-xl p-5 card-shadow lg:col-span-2">
            <div class="flex items-center justify-between mb-6">
              <h3 class="font-semibold text-lg">月度考勤趋势</h3>
              <div class="flex space-x-2">
                <button class="px-3 py-1 text-xs bg-primary/10 text-primary rounded-full">日</button>
                <button class="px-3 py-1 text-xs bg-gray-100 text-gray-500 rounded-full">周</button>
                <button class="px-3 py-1 text-xs bg-gray-100 text-gray-500 rounded-full">月</button>
              </div>
            </div>
            <div class="h-80">
              <canvas id="attendanceTrendChart"></canvas>
            </div>
          </div>
          
          <div class="bg-white rounded-xl p-5 card-shadow">
            <div class="flex items-center justify-between mb-6">
              <h3 class="font-semibold text-lg">考勤类型分布</h3>
              <button class="text-gray-400 hover:text-gray-600">
                <i class="fa fa-ellipsis-v"></i>
              </button>
            </div>
            <div class="h-80 flex items-center justify-center">
              <canvas id="attendanceTypeChart"></canvas>
            </div>
          </div>
        </div>
        
        <!-- 部门考勤对比 -->
        <div class="bg-white rounded-xl p-5 card-shadow mb-6">
          <div class="flex items-center justify-between mb-6">
            <h3 class="font-semibold text-lg">部门考勤对比</h3>
            <div class="flex items-center space-x-4">
              <div class="flex items-center space-x-2">
                <span class="w-3 h-3 bg-primary rounded-full"></span>
                <span class="text-sm text-gray-600">出勤率</span>
              </div>
              <div class="flex items-center space-x-2">
                <span class="w-3 h-3 bg-warning rounded-full"></span>
                <span class="text-sm text-gray-600">迟到率</span>
              </div>
            </div>
          </div>
          <div class="h-80">
            <canvas id="departmentComparisonChart"></canvas>
          </div>
        </div>
        
        <!-- 员工考勤详情表格 -->
        <div class="bg-white rounded-xl p-5 card-shadow">
          <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
            <h3 class="font-semibold text-lg mb-4 md:mb-0">员工考勤详情</h3>
            <div class="flex items-center space-x-3">
              <div class="relative">
                <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                  <i class="fa fa-search text-gray-400"></i>
                </span>
                <input type="text" placeholder="搜索员工..." class="bg-gray-100 rounded-lg pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary/30">
              </div>
              <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-all flex items-center justify-center space-x-2">
                <i class="fa fa-download"></i>
                <span>导出</span>
              </button>
            </div>
          </div>
          
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">员工姓名</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">部门</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">出勤天数</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">迟到次数</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">缺勤天数</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">请假天数</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">出勤率</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="flex-shrink-0 h-10 w-10">
                        <img class="h-10 w-10 rounded-full" src="https://picsum.photos/200/200?random=2" alt="用户头像">
                      </div>
                      <div class="ml-4">
                        <div class="text-sm font-medium text-gray-900">张三</div>
                        <div class="text-sm text-gray-500">zhangsan@example.com</div>
                      </div>
                    </div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">技术部</div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">22</div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">3</div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">0</div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">1</div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="w-full bg-gray-200 rounded-full h-2.5">
                        <div class="bg-primary h-2.5 rounded-full" style="width: 95%"></div>
                      </div>
                      <span class="ml-2 text-sm font-medium text-gray-900">95%</span>
                    </div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <button class="text-primary hover:text-primary/80 mr-3">查看</button>
                    <button class="text-gray-600 hover:text-gray-900">编辑</button>
                  </td>
                </tr>
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="flex-shrink-0 h-10 w-10">
                        <img class="h-10 w-10 rounded-full" src="https://picsum.photos/200/200?random=3" alt="用户头像">
                      </div>
                      <div class="ml-4">
                        <div class="text-sm font-medium text-gray-900">李四</div>
                        <div class="text-sm text-gray-500">lisi@example.com</div>
                      </div>
                    </div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">市场部</div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">20</div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">5</div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">2</div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">1</div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="w-full bg-gray-200 rounded-full h-2.5">
                        <div class="bg-primary h-2.5 rounded-full" style="width: 87%"></div>
                      </div>
                      <span class="ml-2 text-sm font-medium text-gray-900">87%</span>
                    </div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <button class="text-primary hover:text-primary/80 mr-3">查看</button>
                    <button class="text-gray-600 hover:text-gray-900">编辑</button>
                  </td>
                </tr>
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="flex-shrink-0 h-10 w-10">
                        <img class="h-10 w-10 rounded-full" src="https://picsum.photos/200/200?random=4" alt="用户头像">
                      </div>
                      <div class="ml-4">
                        <div class="text-sm font-medium text-gray-900">王五</div>
                        <div class="text-sm text-gray-500">wangwu@example.com</div>
                      </div>
                    </div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">财务部</div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">21</div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">2</div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">0</div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">2</div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="w-full bg-gray-200 rounded-full h-2.5">
                        <div class="bg-primary h-2.5 rounded-full" style="width: 91%"></div>
                      </div>
                      <span class="ml-2 text-sm font-medium text-gray-900">91%</span>
                    </div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <button class="text-primary hover:text-primary/80 mr-3">查看</button>
                    <button class="text-gray-600 hover:text-gray-900">编辑</button>
                  </td>
                </tr>
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="flex-shrink-0 h-10 w-10">
                        <img class="h-10 w-10 rounded-full" src="https://picsum.photos/200/200?random=5" alt="用户头像">
                      </div>
                      <div class="ml-4">
                        <div class="text-sm font-medium text-gray-900">赵六</div>
                        <div class="text-sm text-gray-500">zhaoliu@example.com</div>
                      </div>
                    </div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">人力资源部</div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">22</div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">1</div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">0</div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">0</div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="w-full bg-gray-200 rounded-full h-2.5">
                        <div class="bg-primary h-2.5 rounded-full" style="width: 96%"></div>
                      </div>
                      <span class="ml-2 text-sm font-medium text-gray-900">96%</span>
                    </div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <button class="text-primary hover:text-primary/80 mr-3">查看</button>
                    <button class="text-gray-600 hover:text-gray-900">编辑</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <div class="flex items-center justify-between px-4 py-3 sm:px-6 mt-4">
            <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
              <div>
                <p class="text-sm text-gray-700">
                  显示第 <span class="font-medium">1</span> 到 <span class="font-medium">4</span> 条，共 <span class="font-medium">24</span> 条结果
                </p>
              </div>
              <div>
                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                  <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                    <span class="sr-only">上一页</span>
                    <i class="fa fa-chevron-left text-xs"></i>
                  </a>
                  <a href="#" aria-current="page" class="z-10 bg-primary text-white relative inline-flex items-center px-4 py-2 border border-primary text-sm font-medium">
                    1
                  </a>
                  <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                    2
                  </a>
                  <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                    3
                  </a>
                  <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                    ...
                  </span>
                  <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                    6
                  </a>
                  <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                    <span class="sr-only">下一页</span>
                    <i class="fa fa-chevron-right text-xs"></i>
                  </a>
                </nav>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>

  <script>
    // 侧边栏切换
    document.getElementById('sidebarToggle').addEventListener('click', function() {
      const sidebar = document.getElementById('sidebar');
      sidebar.classList.toggle('-translate-x-full');
    });
    
    // 月度考勤趋势图表
    const attendanceTrendCtx = document.getElementById('attendanceTrendChart').getContext('2d');
    const attendanceTrendChart = new Chart(attendanceTrendCtx, {
      type: 'line',
      data: {
        labels: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日'],
        datasets: [
          {
            label: '出勤人数',
            data: [45, 47, 46, 44, 45, 43, 41, 44, 46, 47, 45, 46, 47, 44, 43, 42, 45, 46, 47, 48, 47, 46, 45, 44, 43, 45, 46, 47, 48, 49],
            borderColor: '#165DFF',
            backgroundColor: 'rgba(22, 93, 255, 0.1)',
            tension: 0.3,
            fill: true
          },
          {
            label: '迟到人数',
            data: [3, 2, 4, 1, 3, 2, 5, 3, 2, 1, 3, 2, 4, 3, 2, 1, 3, 2, 1, 0, 2, 1, 3, 2, 1, 2, 3, 1, 0, 1],
            borderColor: '#FF9F43',
            backgroundColor: 'rgba(255, 159, 67, 0.1)',
            tension: 0.3,
            fill: true
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            position: 'top',
            labels: {
              usePointStyle: true,
              boxWidth: 6
            }
          },
          tooltip: {
            mode: 'index',
            intersect: false,
            backgroundColor: 'rgba(255, 255, 255, 0.9)',
            titleColor: '#1E293B',
            bodyColor: '#1E293B',
            borderColor: '#E2E8F0',
            borderWidth: 1,
            padding: 12,
            boxPadding: 6,
            usePointStyle: true,
            callbacks: {
              label: function(context) {
                return context.dataset.label + ': ' + context.raw;
              }
            }
          }
        },
        scales: {
          x: {
            grid: {
              display: false
            }
          },
          y: {
            beginAtZero: true,
            grid: {
              color: 'rgba(0, 0, 0, 0.05)'
            }
          }
        },
        interaction: {
          mode: 'nearest',
          axis: 'x',
          intersect: false
        },
        elements: {
          point: {
            radius: 2,
            hoverRadius: 5
          }
        }
      }
    });
    
    // 考勤类型分布图表
    const attendanceTypeCtx = document.getElementById('attendanceTypeChart').getContext('2d');
    const attendanceTypeChart = new Chart(attendanceTypeCtx, {
      type: 'doughnut',
      data: {
        labels: ['正常出勤', '迟到', '早退', '缺勤', '请假'],
        datasets: [{
          data: [75, 12, 5, 3, 5],
          backgroundColor: [
            '#165DFF',
            '#FF9F43',
            '#00D2FF',
            '#FF5252',
            '#9C27B0'
          ],
          borderWidth: 0,
          hoverOffset: 4
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            position: 'bottom',
            labels: {
              usePointStyle: true,
              boxWidth: 6,
              padding: 20
            }
          },
          tooltip: {
            backgroundColor: 'rgba(255, 255, 255, 0.9)',
            titleColor: '#1E293B',
            bodyColor: '#1E293B',
            borderColor: '#E2E8F0',
            borderWidth: 1,
            padding: 12,
            boxPadding: 6,
            usePointStyle: true,
            callbacks: {
              label: function(context) {
                return context.label + ': ' + context.raw + '%';
              }
            }
          }
        },
        cutout: '70%'
      }
    });
    
    // 部门考勤对比图表
    const departmentComparisonCtx = document.getElementById('departmentComparisonChart').getContext('2d');
    const departmentComparisonChart = new Chart(departmentComparisonCtx, {
      type: 'bar',
      data: {
        labels: ['技术部', '市场部', '财务部', '人力资源部', '行政部', '销售部'],
        datasets: [
          {
            label: '出勤率',
            data: [92, 85, 88, 94, 87, 83],
            backgroundColor: '#165DFF',
            borderRadius: 6,
            barPercentage: 0.5,
            categoryPercentage: 0.5
          },
          {
            label: '迟到率',
            data: [5, 10, 7, 3, 8, 12],
            backgroundColor: '#FF9F43',
            borderRadius: 6,
            barPercentage: 0.5,
            categoryPercentage: 0.5
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            position: 'top',
            labels: {
              usePointStyle: true,
              boxWidth: 6
            }
          },
          tooltip: {
            mode: 'index',
            intersect: false,
            backgroundColor: 'rgba(255, 255, 255, 0.9)',
            titleColor: '#1E293B',
            bodyColor: '#1E293B',
            borderColor: '#E2E8F0',
            borderWidth: 1,
            padding: 12,
            boxPadding: 6,
            usePointStyle: true,
            callbacks: {
              label: function(context) {
                return context.dataset.label + ': ' + context.raw + '%';
              }
            }
          }
        },
        scales: {
          x: {
            grid: {
              display: false
            }
          },
          y: {
            beginAtZero: true,
            max: 100,
            ticks: {
              callback: function(value) {
                return value + '%';
              }
            },
            grid: {
              color: 'rgba(0, 0, 0, 0.05)'
            }
          }
        }
      }
    });
  </script>
</body>
</html>
    